<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>快递单号查询</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #container {
      width: 80%;
      height: 50px;
      margin: 20px auto;
      display: flex;
    }

    #container input {
      flex: 1;
      outline: none;
      font-size: 20px;
      padding-left: 20px;
      border: solid 3px #999;
    }

    #container button {
      width: 80px;
      height: 50px;
      margin-left: 20px;
      border: none;
      color: white;
      font-size: 22px;
      background: orangered;
    }

    #container button:hover {
      background: rgb(159, 45, 4);
    }

    #history {
      width: 80%;
      padding: 20px;
      margin: 20px auto;
    }

    #history li {
      font-size: 20px;
      color: #999;
    }

    #history span {
      font-size: 22px;
      color: #aaa;
    }
  </style>
</head>

<body>
  <div id="container">
    <input type="text" name="no" id="no">
    <button>查询</button>
  </div>
  <ul id="history">
    <li><span class="time"></span> <span>物流信息</span></li>
  </ul>

  <script>
    function $(selector) {
      return document.querySelector(selector)
    }

    var _no = $("#no")
    var _btn = $("button")
    var _ul = $("#history")

    _btn.onclick = function () {
      _ul.innerText = ""

      var _value = _no.value
      if (_value.trim() === "") {
        alert("快递单号不能为空")
        return
      }

      var _http = new XMLHttpRequest()

      _http.open('get', 'https://route.showapi.com/2650-3?showapi_appid=1016484&showapi_sign=a6949f18db654de2843a537f42b92c59&com=auto&nu=' + _value)

      _http.send()

      _http.onreadystatechange = function () {
        if (_http.readyState === 4 && _http.status === 200) {
          var _txt = _http.responseText
          var _obj = JSON.parse(_txt)

          // 获取快递信息数组
          var _data = _obj.showapi_res_body.data
          console.log(_data)
          for (var i = 0; i < _data.length; i++) {
            var _span = document.createElement('span')
            _span.className = "time"
            _span.innerText = _data[i].time

            var _span2 = document.createElement("span")
            _span2.innerText = _data[i].address + _data[i].context

            var _li = document.createElement("li")
            _li.appendChild(_span)
            _li.appendChild(_span2)

            _ul.appendChild(_li)

          }

        }
      }
    }
  </script>
</body>

</html>